<template>
	<view class="cate-page page">
		<view class="left">
			<view class="cate-item"
				:class="{active: active===i, 'pre-active': active-1 ===i, 'post-active': active+1===i}"
				v-for="(item,i) in cates" :key="i" @tap="active=i">
				<view class="inner">
					{{item.name}}
				</view>
			</view>
			<view class="cate-item" :class="{'post-active': active+1 === cates.length}">
				<view class="inner"></view>
			</view>
		</view>
		<view class="right">
			<fui-grid :show-border="false" :square="true">
				<fui-grid-item v-for="(item, index) in childrenCate" :index="index" :key="index">
					<view class="grid-item-box">
						<image :src="item.image" class="cate-item-image"></image>
						<text class="text">{{item.name}}</text>
					</view>
				</fui-grid-item>
			</fui-grid>
		</view>
	</view>
</template>

<script>
	import {
		fetctProductCategory
	} from '../../service/api/mall'
	export default {
		data() {
			return {
				active: 0,
				cates: [],
			}
		},
		computed: {
			childrenCate() {
				let activeCate = this.cates[this.active]
				return activeCate ? activeCate.children : []
			}
		},
		methods: {
			fetchData() {
				fetctProductCategory().then(res => {
					this.cates = res
				})
			}
		},
		onLoad() {
			this.fetchData()
		}
	}
</script>

<style lang="scss" scoped>
	.cate-page {
		display: flex;

		.left {
			background: #f8f8f8;
			min-height: 100vh;
			width: 180rpx;

			.cate-item {
				background: #fff;

				.inner {
					padding: 20rpx;
					background: #f8f8f8;
					font-size: 28rpx;
				}

				&.active .inner {
					color: #d81e06;
					background: #fff;
					position: relative;
					border-left: 2px solid #d81e06;
				}

				&.pre-active .inner {
					border-radius: 0 0 20rpx 0;
				}

				&.post-active .inner {
					border-radius: 0 20rpx 0 0;
				}
			}
		}

		.right {
			flex: 1;
		}
	}

	.grid-item-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 100%;
		justify-content: center;

		.cate-item-image {
			width: 80rpx;
			height: 80rpx;
		}

		.text {
			display: block;
			font-size: .8rem;
			color: #666;
		}
	}
</style>